import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Select, Button, List, DatePicker, InputNumber, Checkbox, TreeSelect } from 'antd';
import Popup_table_hooks_datas from './popup_table_hooks_datas'
import Popup_table_hooks_viewname from './popup_table_hooks_viewname'
import { ScanOutlined } from '@ant-design/icons';
import Popup_select from './popup_select';
import Popup_table_hooks_mx from './popup_table_hooks_mx'
import '/src/styles/customfielditem.css'
import Upload_hooks from './upload_hooks'
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
import { openNotification_util } from '../util/util';
import { transform } from 'lodash';
moment.locale('zh-cn')
const { TextArea } = Input;
const { Search } = Input;



const Customfielditem_hook_mobile = (props) => {
  var rightitem = null;
  /**
   * 特殊场景专用
   */
  if (props.item.inputType == "pdf_item") {
    rightitem = () => {
      return <Button type="primary" style={props.item.style ? props.item.style : { width: "95%", backgroundColor: "#1890ff" }}
        onClick={() => {
          props.form[props.item.dataIndex].value ? window.open(props.form[props.item.dataIndex].value) :
            openNotification_util("附件地址异常：" + props.form[props.item.dataIndex].value)
        }}> 查看pdf</Button>
    }
  }
  /**
   * 输入框
   */
  else if (props.item.inputType == "input_item") {
    rightitem = () => {
      return <Input style={props.item.style ? props.item.style : { width: "95%" }}
        type={props.item.type ? props.item.type : "text"}
        value={props.form[props.item.dataIndex].value} disabled={props.item.disabled ? true : false}
        onChange={e => props.handlechange(props.item.dataIndex, e.target.value, 'single')}
        placeholder={`输入${props.item.title}...`}
      />
    }
  }

  else if (props.item.inputType == "search_item") {
    rightitem = () => {
      return <>
        <Input style={props.item.style ? props.item.style : { width: "80%" }}
          value={props.form[props.item.dataIndex].value} disabled={props.item.disabled ? true : false}
          onChange={e => props.handlechange(props.item.dataIndex, e.target.value, 'search')}
          placeholder={`输入${props.item.title}...`}
        />
         <Button type="primary" style={{ width: "15%",}} onClick={() => props.onSearch(props.item.dataIndex)} icon={<ScanOutlined />} />
      </>
    }
  }

  else if (props.item.inputType == "select_search_item") {
    rightitem = () => {
      return <>
        <Select style={{ width: "80%", textAlign: "left", zIndex: "1" }} disabled={props.item.disabled ? true : false}
          showSearch
          optionFilterProp="label"
          mode={props.item.mode ? props.item.mode : 'single'}
          placeholder={`选择${props.item.title}...`} value={props.form[props.item.dataIndex].value}
          onChange={(e, extra) => props.handlechange(props.item.dataIndex, e, 'search')}
          options={props.dynDatasObject[props.item.datas_key]}
        />
        <Button type="primary" style={{ width: "15%",}}  onClick={() => props.onSearch(props.item.dataIndex)} icon={<ScanOutlined />} />
      </>
    }
  }
  /**
   * 数值框 
   * 
   */
  else if (props.item.inputType == "input_number_item") {
    rightitem = () => {
      return <InputNumber controls={true} max="22332233223322339"
        style={props.item.style ? props.item.style : { width: "95%" }}
        value={props.form[props.item.dataIndex].value} disabled={props.item.disabled ? true : false}
        onChange={e => props.handlechange(props.item.dataIndex, e, 'single')}
        placeholder={`输入${props.item.title}...`}
      />
    }
  }
  /**
   * 单行文本框
   * 
   */
  else if (props.item.inputType == "input_text_item") {
    rightitem = () => {
      return <TextArea style={props.item.style ? props.item.style : { width: "95%", height: "2.5rem" }}
        autoSize={{
          minRows: 2,
          maxRows: 3,
        }}
        value={props.form[props.item.dataIndex].value} disabled={props.item.disabled ? true : false}
        onChange={e => props.handlechange(props.item.dataIndex, e.target.value, 'single')}
        placeholder={props.item.placeholder ? props.item.placeholder : `输入${props.item.title}...`}
      />
    }
  }
  /**
 * 最经典树状下拉框，适配最多场景
 */
  else if (props.item.inputType == "tree_select_item") {
    rightitem = () => {
      return <TreeSelect
        treeLine={true}
        style={{ width: "95%", textAlign: "left" }}
        listHeight={500}
        showSearch
        treeData={props.item.selectdata}
        showLine={true}
        treedefaultExpandedKeys={["C", "B", "Y"]}
        placeholder={`选择${props.item.title}...`}
        value={props.form[props.item.dataIndex].value}
        onSelect={(e, node, extra) => props.handlechange(props.item.dataIndex, e, 'single', node)}

      />

    }
  }
  /**
   * 最经典下拉框，适配最多场景
   */
  else if (props.item.inputType == "select_item") {
    rightitem = () => {
      return <Select
        style={{ width: "95%", textAlign: "left" }}
        disabled={props.item.disabled ? true : false}
        className={props.form[props.item.dataIndex].value == "严重" ? 'my-select' : ''}
        showSearch
        optionFilterProp="label"

        mode={props.item.mode ? props.item.mode : 'single'}
        placeholder={`选择${props.item.title}...`} value={props.form[props.item.dataIndex].value}
        onChange={(e, extra) => props.handlechange(props.item.dataIndex, e, 'single', extra)}
        options={props.item.selectdata}
      />

    }
  }
  /**通过dynDatasObject传数据源 */
  else if (props.item.inputType == "select_item_new") {
    rightitem = () => {
      return <Select style={{ width: "95%", textAlign: "left", zIndex: "1" }} disabled={props.item.disabled ? true : false}
        showSearch
        optionFilterProp="label"
        mode={props.item.mode ? props.item.mode : 'single'}
        placeholder={`选择${props.item.title}...`} value={props.form[props.item.dataIndex].value}
        onChange={(e, extra) => props.handlechange(props.item.popup_tansferarr, extra, 'muti')}
        options={props.dynDatasObject[props.item.datas_key]}

      />
    }
  }

  /**
   * 选择框
   */
  else if (props.item.inputType == "checkbox_item") {
    rightitem = () => {
      return <Checkbox.Group
        style={{ width: "95%", textAlign: "left" }}
        options={props.item.selectdata} value={props.form[props.item.dataIndex].value}
        onChange={e => {
          props.handlechange(props.item.dataIndex, e, 'single')
        }} />

    }
  }
  /**
   * 多选
   */
  else if (props.item.inputType == "select_item_mutiple") {
    var optionitem = props.item.selectdata.map(obj => <Option value={obj.value}>{obj.label}</Option>)
    rightitem = () => {
      return <Select style={{ width: "100%", textAlign: "left", backgroundColor: "green" }} disabled={props.item.disabled ? true : false}
        className={props.form[props.item.dataIndex].value == "严重" ? 'my-select' : ''}
        showSearch
        mode={props.item.mode ? props.item.mode : 'single'}
        placeholder={`选择${props.item.title}...`} value={props.form[props.item.dataIndex].value}
        onChange={(e, extra) => props.handlechange(props.item.dataIndex, e, 'single', extra)}
        options={props.dynDatasObject[props.item.datas_key]}

      />
    }
  }
  /**
   * 联动选择select 
   */
  else if (props.item.inputType == "select_item_ld") {
    var optionitem = props.item.selectdata.map(obj => <Option value={obj.value}>{obj.label}</Option>)
    rightitem = () => {
      return <Select style={{ width: "95%", textAlign: "left" }} disabled={props.item.disabled ? true : false}
        className={props.form[props.item.dataIndex].value == "严重" ? 'my-select' : ''}
        showSearch
        mode={props.item.mode ? props.item.mode : 'single'}
        placeholder={`选择${props.item.title}...`} value={props.form[props.item.dataIndex].value}
        onChange={(e, item) => props.handlechange(props.item.dataIndex, item, 'single')} >
        {optionitem}
      </Select>
    }
  }

  /**
   * 日期选择框
   */
  else if (props.item.inputType == "date_item") {
    rightitem = () => {
      return <DatePicker style={{ width: "95%" }} disabled={props.item.disabled ? true : false}
        showTime={props.item.showTime ? { format: 'HH:mm', } : false} showNow={true}
        locale={locale} value={props.form[props.item.dataIndex].value == null || props.form[props.item.dataIndex].value == '' ?
          '' : moment(props.form[props.item.dataIndex].value)}
        onChange={(e, datestring) => { props.handlechange(props.item.dataIndex, datestring, 'single') }} />
    }
  }
  /**
   * 上传组件,图片格式 附件需改造
   */
  else if (props.item.inputType == "upload_item") {
    rightitem = () => {
      return <Upload_hooks handleback={tpurl => props.handlechange(props.item.dataIndex, tpurl, 'single')} disabled={props.item.disabled ? true : false}
        title={props.item.title} initpxtpurl={props.form[props.item.dataIndex].value} />
    }
  }
  /**
   * 配置下拉选择弹框专用
   */
  else if (props.item.inputType == "popup_select_item") {
    rightitem = () => {
      var initdata = []

      try {
        initdata = JSON.parse(props.form[props.item.dataIndex].value);
      } catch (e) {
      }
      return <Popup_select initdata={initdata}
        onOk={(data) => { props.handlechange(props.item.dataIndex, data, 'single') }}
      />
    }
  }
  /**
   * 最经典的popup选择控件 最新版本用dynDatasObject传数据
   */
  else if (props.item.inputType == "popup_item_datas") {
    // console.log(props.dynDatasObject[props.item.datas_key],"222222222222222222222222");
    rightitem = () => {
      return <Popup_table_hooks_datas viewname={props.item.popup_viewname} selecttype="radio" datas={props.dynDatasObject[props.item.datas_key]}
        tablecolnum={props.item.popup_column} popup_maintitle={props.item.popup_maintitle}
        ifshow="none" placeholder={props.item.placeholder}
        handlechange={(backdata) => { props.handlechange(props.item.popup_tansferarr, backdata, 'muti') }}
        inputvalue={props.form[props.item.dataIndex].value} />
    }
  }
  /**
   * 没啥用 基本用经典本
   */
  else if (props.item.inputType == "popup_item_datas_new") {
    rightitem = () => {
      return <Popup_table_hooks_datas selecttype="radio" datas={props.dynDatasObject[props.item.datas_key]}
        tablecolnum={props.item.popup_column} popup_maintitle={props.item.popup_maintitle}
        ifshow="none" placeholder={props.item.placeholder}
        changefresh={props.item.fresh ? props.changefresh : false}

        handlechange={(backdata) => { props.handlechange(props.item.popup_tansferarr, backdata, 'muti') }}
        inputvalue={props.form[props.item.dataIndex].value} />
    }
  }
  /**
   * 视图模式popup 不可用于明细 有严重性能问题
   */
  else if (props.item.inputType == "popup_item_viewname") {
    rightitem = () => {
      return <Popup_table_hooks_viewname viewname={props.item.popup_viewname} selecttype="radio"
        tablecolnum={props.item.popup_column} popup_maintitle={props.item.popup_maintitle}
        ifshow="none" placeholder={props.item.placeholder}
        filterfuc={(backdata) => props.item.filterfuc ? props.item.filterfuc(backdata) : backdata}
        handlechange={(backdata) => { props.handlechange(props.item.popup_tansferarr, backdata, 'muti') }}
        inputvalue={props.form[props.item.dataIndex].value} />
    }
  }
  /**主从明细联动 特殊场景用 */
  else if (props.item.inputType == "popup_item_mx") {
    rightitem = () => {
      return <Popup_table_hooks_mx
        viewname={props.item.popup_viewname}
        viewmxname={props.item.popup_viewmxname}
        placeholder={props.item.placeholder}
        selecttype="radio"
        tablecolnum={props.item.popup_column}
        mxtablecolnum={props.item.popup_column_mx}
        popup_maintitle={props.item.popup_maintitle}
        popup_mxtitle={props.item.popup_mxtitle}
        handlechange={(rtselectrow) => {
          props.handlechange({
            popup_tansferarr: props.item.popup_tansferarr,
            popup_tansferarr_mx: props.item.popup_tansferarr_mx
          }, rtselectrow, 'muti-mx')
        }}
        inputvalue={props.form[props.item.dataIndex].value} />
    }
  }
  /**
   * 适配最多场景版本的 主从明细,自己可定义传参
   */
  else if (props.item.inputType == "popup_item_mx_free") {
    rightitem = () => {
      return <Popup_table_hooks_mx
        viewname={props.item.popup_viewname}
        viewmxname={props.item.popup_viewmxname}
        placeholder={props.item.placeholder}
        selecttype="radio"
        tablecolnum={props.item.popup_column}
        mxtablecolnum={props.item.popup_column_mx}
        popup_maintitle={props.item.popup_maintitle}
        popup_mxtitle={props.item.popup_mxtitle}
        handlechange={(rtselectrow) => {
          props.handlechange({
            item: props.item
          }, rtselectrow, 'muti-free')
        }}
        inputvalue={props.form[props.item.dataIndex].value} />
    }
  }
  /**渲染不可编辑文本框  */
  else if (props.item.inputType == "readonly") {
    rightitem = () => {
      return <Input style={{ width: "95%" }} value={props.form[props.item.dataIndex].value}
        onChange={e => props.handlechange(props.item.dataIndex, e.target.value, 'single')}
        placeholder={`${props.item.placeholder ? props.item.placeholder : `输入${props.item.title}`}...`} disabled
      />
    }
  }
  else if (props.item.inputType == "none") {
    rightitem = () => {
      return ""
    }
  }
  else if (props.item.inputType == "deletetool_item") {
    rightitem = () => {
      return ""
    }
  }
  else {
    rightitem = () => {
      return ""
    }
  }





  //主体渲染，上面是有边框渲染

  if (props.item.inputType == "input_text_item" || props.item.inputType == "popup_select_item"

  ) {

    return <div style={{
      marginTop: "0.1rem", height: "2.5rem", fontSize: "0.65rem", position: "relative",
      width: "90%", textIndent: "0.5rem",marginLeft:"5%",
      backgroundColor: "white", lineHeight: "1.6rem", fontSize: "0.65rem", fontWeight: "500", textAlign: "center",
    }}>
      <div style={{
        backgroundColor: "rgba(241,241,241,0.4)", position: "absolute", width: "30%",
        left: "0", height: "2.5rem", lineHeight: "2.5rem", fontWeight: props.item.bt ? '800' : '400'
      }}>
        <a style={{ color: "red" }}>{props.item.bt ? '*' : ''}</a>{
          props.item.inputType == "deletetool_item" ? "" : props.item.title}</div>
      <div style={{ backgroundColor: "white", position: "absolute", width: "70%", right: "0",height:'100%'}}>
        {rightitem()}
      </div>
    </div>
  }

  else if (props.item.oneline) {

    return <div style={{
      marginTop: "0.1rem", height: props.item.lineheight, fontSize: "0.65rem", position: "relative",
      width: "90%", textIndent: "0.5rem",marginLeft:"5%",
      backgroundColor: "white", lineHeight: "1.6rem", fontSize: "0.65rem", fontWeight: "500", textAlign: "center",
    }}>
      <div style={{
        backgroundColor: "rgba(241,241,241,0.4)", position: "absolute", width: "30%",
        left: "0", height: props.item.lineheight,
        lineHeight: props.item.lineheight, fontWeight: props.item.bt ? '800' : '400'
      }}>
        <a style={{ color: "red" }}>{props.item.bt ? '*' : ''}</a>{
          props.item.inputType == "deletetool_item" ? "" : props.item.title}</div>

      <div style={{ backgroundColor: "white", position: "absolute", width: "70%", right: "0",height:'100%'}}>
        {rightitem()}
      </div>
    </div>

  }
  /**
   * 自定义行宽
   */
  else if (props.item.customlinewidth) {

    return <div style={{
      marginTop: "0.1rem", height: "1.8rem", fontSize: "0.65rem", position: "relative",
      width: props.item.customlinewidth, textIndent: "0.5rem",
      backgroundColor: "white", lineHeight: "1.6rem", fontSize: "0.65rem", fontWeight: "500", textAlign: "center",
      marginLeft: "0.1rem"
    }}>
      <div style={{
        backgroundColor: "#F0F0F0", position: "absolute", width: "16%",
        left: "0", height: "1.6rem", lineHeight: "1.6rem", fontWeight: props.item.bt ? '800' : '400'
      }}>
        <a style={{ color: "red" }}>{props.item.bt ? '*' : ''}</a>{
          props.item.inputType == "deletetool_item" ? "" : props.item.title}</div>

      <div style={{ backgroundColor: "white", position: "absolute", width: "83.1%", right: "1%" }}>
        {rightitem()}
      </div>
    </div>

  }
  /**渲染空白一格 */
  else if (props.item.inputType == "space_item") {
    return <div style={styleobj.linestyleflexitem}>
      <Input style={{ display: "none" }} disabled
        onChange={e => props.handlechange(props.item.dataIndex, e.target.value, 'single')}
        placeholder={`输入${props.item.title}...`}
      />
    </div>
  }
  /**换行 */
  else if (props.item.inputType == "space_line") {
    return <div style={{
      marginTop: "0.1rem", height: "0.1rem", fontSize: "0.65rem", position: "relative", width: "95vw", textIndent: "0.5rem", color: "#C3313A",
      backgroundColor: "white", fontSize: "0.65rem", fontWeight: "800", textAlign: "left"
    }}>
    </div>
  }
  /**渲染标题 */
  else if (props.item.inputType == "title_item") {
    return <div style={{
      marginTop: "0.1rem", height: "1.2rem", fontSize: "0.75rem", position: "relative", width: "95vw", textIndent: "0.5rem", color: "black",
      backgroundColor: "white", lineHeight: "1.2rem", fontWeight: "800", textAlign: "left",borderLeftStyle: "solid",borderWidth: "0.3rem",
      borderColor: "#a91f24",marginLeft:"1vw"
    }}>
      {props.item.title}
    </div>
  }
  /**人生本是虚无 */
  else if (props.item.inputType == "none") {
    return ""
  }
  else {
    return <div style={{
      marginTop: "0.1rem",
      height: "1.6rem", fontSize: "0.65rem", position: "relative", width: "90%", textIndent: "0.5rem", marginLeft: "5%",
      backgroundColor: "white", lineHeight: "1.6rem", fontSize: "0.65rem", fontWeight: "500", textAlign: "center"
    }}>
      <div style={props.item.inputType == "none" || props.item.inputType == "deletetool_item" ? styleobj.linestyleflexitemleftnone : styleobj.linestyleflexitemleft}>
        <a style={{ color: "red" }}>{props.item.bt ? '*' : ''}</a>
        <span style={{ fontWeight: props.item.bt ? '800' : '400' }}>{
          props.item.inputType == "deletetool_item" ? "" : props.item.title}
        </span></div>
      <div style={styleobj.linestyleflexitemright}>
        {rightitem()}
      </div>
    </div>
  }
}

export default Customfielditem_hook_mobile

var styleobj = {
  linestyle: { height: "1.8rem", fontSize: "0.65rem", position: "relative", width: "100%", textIndent: "1rem" },
  linestylesmall: { height: "1.3rem", fontSize: "0.65rem", position: "relative", width: "100%", textIndent: "1rem" },
  linestyleflexitem: {
    marginTop: "0.1rem",
    height: "1.6rem", fontSize: "0.65rem", position: "relative", width: "90%", textIndent: "", marginLeft: "5%",
    backgroundColor: "white", lineHeight: "1.6rem", fontSize: "0.65rem", fontWeight: "500", textAlign: "center"
  },
  linestyleflexitemleftnone: { backgroundColor: "", position: "absolute", width: "30%", left: "0" },
  linestyleflexitemleft: {  position: "absolute", width: "30%", left: "0", fontSize: "0.6rem", fontWeight: "520" },
  linestyleflexitemright: { backgroundColor: "white", position: "absolute", width: "70%", right: "0",height:'100%'},
  lineleft: { width: "100%", height: "100%", position: "absolute", left: "0%", textAlign: "left", lineHeight: "2rem", fontSize: "0.75rem", fontWeight: "700" },


}